<template>
  <div class="case" :class="{'case_fail':!pass}">
    <em class="min" @click="reduce">-</em>
    <input v-model="data" placeholder="" class="param_26 is_int"
           style="width: 80px; float: left;text-align: center" type="number">
    <em class="add" @click="add">+</em>
  </div>
</template>
<script>
    export default {
        props: {
          pass:{
            type:Boolean,
            default:true
          }
        },
        data() {
            return {
              data:0
            }
        },
        methods: {
          add(){
            this.data++
          },
          reduce(){
            this.data>0?this.data--:null;
          }
        },
        components: {},
        mounted() {

        },
        created() {

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteUpdate(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteLeave(to, from, next) {
            next(vm => {

            })
        },
        watch:{
            data(){
              this.$emit("change",this.data)
            }
        }
    }
</script>

<style lang="less" scoped="">
  .case_fail{
    .param_26{
      border-color: #9e2828!important;
    }
  }
</style>
